<template>
    <div class="box-comment">
        <textarea v-model="textareValue" placeholder="欢迎评论"></textarea>
    </div>
    <div class="box-emoji">
        <V3Emoji :custom-size="customSize" @click-emoji="clickEmoji" :options-name="optionsName" :recent="true"
            :keep="true" :manualClose="true">
        </V3Emoji>
        <el-button type="primary" plain @click="sendComment">发送评论</el-button>
    </div>
</template>

<script setup>
import { ref, reactive, inject } from 'vue';
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'

const optionsName = reactive({
    'Smileys & Emotion': '笑脸&表情',
    'Food & Drink': '食物&饮料',
    'Animals & Nature': '动物&自然',
    'Travel & Places': '旅行&地点',
    'People & Body': '人物&身体',
    Objects: '物品',
    Symbols: '符号',
    Flags: '旗帜',
    Activities: '活动'
})

const emits = defineEmits(['sendContent'])

const customSize = {
    'V3Emoji-width': '250px',
    'V3Emoji-height': '200px',
    'V3Emoji-fontSize': '16px',
    'V3Emoji-itemSize': '15px'
};

let textareValue = ref("")

const clickEmoji = (val) => {
    textareValue.value += val;
}

let comment = inject('commentValue') // 接受

const sendComment = () => {
    comment.content = textareValue.value
    emits('sendContent')
    textareValue.value = ""
}
</script>

<style lang="scss" scoped>
.box-comment textarea {
    resize: none;
    margin-top: 2rem;
    width: 100%;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem 2rem;
    border-radius: 1rem;
    background-color: #f2f2f2;
    height: 14rem;
}

.box-emoji {
    display: flex;
    margin-top: 1rem;
}
</style>